import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import React, { Suspense, useState } from 'react';
import "./home.css"
import logo from "../assets/logo.png"
import UserMenu from "./Menu"
import BreadcrumbCom from "./Breadcrumb"
import { useLocation, useMatch } from "react-router-dom"
const { Header, Footer, Sider, Content } = Layout;


// let menus = []

const Home = (props) => {
    console.log(props);
    const [collapsed, setCollapsed] = useState(false);
    //排除掉不需要布局的页面
    let location = useLocation()
    console.log(location.pathname);
    //有些页面是不需要带布局的
    let match = useMatch(location.pathname)
    console.log('match======', match);
    let excludePage = ['/login', '/page404']
    if (excludePage.includes(location.pathname)) {
        //不需要布局组件
        return props.children
    } else {
        return (
            <Layout>
                <Sider className='side' collapsed={collapsed}>
                    <div className="logo">
                        <img src={logo} alt="" />
                    </div>
                    <UserMenu></UserMenu>
                </Sider>
                <Layout>
                    <Header>
                        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: () => setCollapsed(!collapsed),
                        })}
                        <span className='title'>锋云智慧商城管理系统</span>
                        <span className="info">
                            <b>卢本伟</b>
                            <b>消息：</b>
                            <b>
                                <a href="#">退出</a>
                            </b>
                        </span>
                    </Header>
                    <Suspense>
                        <Content>
                            {props.children}
                        </Content>
                    </Suspense>
                </Layout>
            </Layout>
        )
    }


}

export default Home
